<template>
  <d2-container>

    <template slot="header">
      <el-form :gutter="24" ref="search-box" :model="mainQuery" label-position="left" :inline="true">
        <el-form-item label="商户号：" size="mini">
          <el-select v-model="mainQuery.mchNo" placeholder="转账币种" clearable >
            <el-option v-for="item in machOptons" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平台订单号：" size="mini">
          <el-input placeholder="" v-model="mainQuery.tradeNo" @keyup.enter.native="handleSearch" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="交易网站" size="mini">
          <el-input placeholder="" v-model="mainQuery.mchUrl" @keyup.enter.native="handleSearch" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="时间区间：" size="mini">
          <el-date-picker size="small" v-model="dateTimeRange" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="datetimePickerOptions" @change="onDateTimePickerChange" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div class="search-btn-box">
        <div class="right">
          <el-button class="filter-item" icon="" type="default" @click="resetMainData" :loading="mainTable.loading" size="small">重置</el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleSearch" :loading="mainTable.loading" size="small">查询</el-button>
        </div>
      </div>
    </template>

    <!--主列表数据-->
    <d2-crud ref="d2Crud" :options="mainTable.options" :index-row="mainTable.indexRow" :columns="mainTable.columns" :data="mainTable.list" :selection-row="mainTable.allowSelect" :loading="mainTable.loading"  @selection-change="" @custom-emit-handle-retry-mch-notify="handleRetryMchNotify"></d2-crud>

    <template slot="footer">
      <el-pagination @size-change="handleMainSizeChange" @current-change="handleMainPageChange" :current-page="mainTable.pagination.currentPage" :page-sizes="mainTable.pagination.pageSizes" :page-size="mainTable.pagination.pageSize" :page-count="mainTable.pagination.pageCount" :total="mainTable.pagination.total" layout="total, sizes, prev, pager, next, jumper" :background="true">
      </el-pagination>
    </template>

  </d2-container>
</template>

<script>

import ApiMain from '@/api/trade.base';
import mchMain from '@/api/mch.info';
import util from '@/libs/util.js';
import { checkButtonAccess } from '@/filters/index';
import DatetimePickerMixin from '@/mixin/DatetimePickerMixin'

export default {
  name: 'trade-track',
  mixins: [
    DatetimePickerMixin,
  ],
  components: {
  },
  data() {
    return {

      mainQuery: {
        type: 2,
        mchNo: '',
        tradeNo: '',
        createTimeRange: [],
      },
      machOptons: [],
      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: '暂无数据',
          size: 'mini',
        },
        // indexRow: {
        //   title:'序号',
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          // {title: 'id', key: 'id', align: 'center', showOverflowTooltip: true},
           {title: '商户号', key: 'mchNo', align: 'center', width: '180', showOverflowTooltip: true},
          { title: '平台订单号', key: 'tradeNo', align: 'center', width: '180', showOverflowTooltip: true, },
          // {title: '终端号', key: 'terNo', align: 'center', width: '180', showOverflowTooltip: true},
          { title: '进入系统时间', key: 'createTime', align: 'center', width: '180', showOverflowTooltip: true },
          // {title: '来源IP', key: 'ipAddress', align: 'center', width: '180', showOverflowTooltip: true},
          {
            title: '交易金额', key: 'mchTransAmount', align: 'center', width: '120', showOverflowTooltip: true, formatter(row, column, cellValue, index) {
              return row.mchTransCurrency + ' ' + row.mchTransAmount / 100
            }
          },
          { title: '描述', key: 'description', align: 'center', width: '180', showOverflowTooltip: true },
          { title: '异常码', key: 'respCode', align: 'center', width: '180', showOverflowTooltip: true },
          { title: '异常原因', key: 'respMsg', align: 'center', width: '180', showOverflowTooltip: true },
          // {title: 'http协议', key: 'transPortProtocol', align: 'center', width: '180', showOverflowTooltip: true},
          // {title: '来源网站', key: 'mchUrl', align: 'center', width: '180', showOverflowTooltip: true},
          { title: '提交网址', key: 'submitUrl', align: 'center', width: '180', showOverflowTooltip: true },
          { title: '返回网址', key: 'returnUrl', align: 'center', width: '180', showOverflowTooltip: true },
          { title: '通知网址', key: 'mchNotifyUrl', align: 'center', width: '180', showOverflowTooltip: true },
          { title: '通知次数', key: 'mchNotifyTimes', align: 'center', width: '180', showOverflowTooltip: true },
          { title: '通知状态', key: 'mchNotifyStatus', align: 'center', width: '180', showOverflowTooltip: true },
        ],
        rowHandle: {
          width: '150',
          align: 'center',
          fixed: 'right',
          custom: [
            {
              text: '重试通知',
              type: 'warning',
              size: 'mini',
              emit: 'custom-emit-handle-retry-mch-notify',
              show(index, row) {
                // 满5次之后允许重试
                return row.mchNotifyTimes >= 5 && row.mchNotifyTimes <= 10 && checkButtonAccess('trade-track-retry-mch-notify') && row.mchNotifyStatus != 'SUCCESS'
              }
            },
          ]
        },
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
      },

      dateTimeRange: []
    }
  },
  mounted() {
    this.resetMainData();
  },
  beforeDestroy() {
  },
  methods: {

    handleSearch() {
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData();
    },

    renderMainData(re) {
      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },

    handleMainPageChange(val) {
      this.mainTable.pagination.currentPage = val;
      this.fetchMainData()
    },

    buildMainQuery() {

      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {

      this.mainQuery = {
        type: 2,
        mchNo: '',
        tradeNo: '',
        createTimeRange: [],
      };

      this.fetchMainData();
    },

    async fetchMainData() {

      this.mainTable.loading = true;

      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
        this.machOptons = await mchMain.option()
      } catch (err) { }

      this.mainTable.loading = false;

    },

    onDateTimePickerChange() {
      this.mainQuery.createTimeRange = this.dateTimeRange;
    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
      this.handleSet();
    },

    handleAdd() {
      this.$refs['dialog-add'].show();
    },

    handleSet() {
      if (this.mainTable.current) {
        this.$refs['dialog-add'].show(this.mainTable.current.id);
      }
    },

    handleRetryMchNotify({ index, row }) {
      this.$confirm('确定操作重试通知商户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doHandleRetryMchNotify([row.orderId])
      });
    },

    async doHandleRetryMchNotify(ids) {
      await ApiMain.mchNotifyRetry({ ids: ids.join(',') });
      this.$message({ message: '已重试通知，请稍后查询', type: 'success' });
      this.fetchMainData()
    },

  }
}
</script>

<style>
</style>
